<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>绑定银行卡</title>
    <link rel="stylesheet" href="../../css/app.css" />
    <link rel="stylesheet" href="../../css/mui.min.css" />
    <link rel="stylesheet" href="../../css/own.css" />
    <link rel="stylesheet" href="../../css/mui.picker.min.css" />
    <link rel="stylesheet" href="../../css/mui.poppicker.css" />
    <script type="text/javascript" src="../../js/mui.min.js" ></script>
	<script type="text/javascript" src="../../js/common.js"></script>
	<script src="../../js/jquery-1.11.3.js"></script>
	<style>
		input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea{
			margin-bottom: 0px;
		}
		#detailedAddress{
			width: 72%;
		}
		#alertDiv{
			width: 100%;
			/*height: 500px;*/
			background-color: rgba(0, 0, 0, 0.6);
			position: fixed;
			top:0px;
			left: 0px;
			display: none;
		}
		#alertDiv #alertDivContent{
			background-color: #FFFFFF;
			width: 300px;
			height: 240px;
			position: absolute;
		}
		#alertDiv #alertDivContent h3{
			line-height: 40px;
			font-size: 18px;
			color:#FFFFFF;
			text-align: center;
			margin-top: -0px;
			font-weight: normal;
			background-color:#2B2B2B;
		}
		#alertDiv #alertDivContent #alertMainContent{
			width: 92%;
			padding:5px 4%;
		}
		#alertDiv #alertDivContent button{
			width: 44%;
			margin-left: 4%;
		}
	</style>
	<script>
		mui.init({}); 
		  var a_id=null;
		  var bankList=null;
		mui.plusReady(function(){
			tzdr.init.initHearListener();
			$("#alertDiv").css({"height":window.innerHeight+"px","background-color":"rgba(0, 0, 0, 0.2)"});
			var leftWidth=window.innerWidth/2-150;
			$("#alertDivContent").css({"top":window.innerHeight/2-120+"px","left":leftWidth+"px"});
    		document.getElementById("add_bank").addEventListener("tap",function(){
//  			document.getElementById("confirm_quit").innerText="确认添加";
//  			mui('#quitaccc').popover('show');         
    			  add_bank();
    		});
    		var paramUrl={
				url:"../login/login.html"
			}
    		mui.app_request("/user/getbalancerate",{
    			"businessType":4 
    		},function(result){
    			
    			if(!mui.isnull(result.data.username)){
    				document.getElementById("user_name").value=result.data.username;
    				return; 
    			}else{ 
    				document.getElementById("user_name").value="";
    				mui.toast("请先实名认证！");
    				mui.openWindow("verified.html");
    				return;
    			}
    			return;
    		},function(result){
    			return;
    		},paramUrl);
    		//获取已绑定银行卡列表
    		mui.app_request('user/withdraw/bank_list',{},function(result){
    			if(!mui.isnull(result.data)){
    				document.getElementById("aw_bank").style.display="block";
    					mui.each(result.data,function(i){
    							//创建绑定银行卡子元素
    							addBankList(result.data[i]);
    				});
		    			//删除绑定银行卡
		    			mui(".aw_bank").on("tap","a",function(){
		    				document.getElementById("confirm_quit").innerText="确认删除";
		    				mui('#quitaccc').popover('show');
		    				
		    				a_id=this.getAttribute("id");
		    			
		    		});
		    		
						 //切换默认银行卡
		    			mui(".aw_bank").on("tap","div",function(){
		    				var li=this.parentNode;
		    				changebank(li);
		    			});
		    		
    			}else{
    				document.getElementById("aw_bank").style.display="none";
    			}
    			return;
    		},function(result){
    			if(result.code==3){
    				mui.toast("用户信息不存在！");
    				return;
    			}
    		},paramUrl);
    		//获取系统中支持提现的银行列表
    		mui.app_request('user/withdraw/support_banks',{},function(result){
    					
    					if(!mui.isnull(result.data)){
    						bankList=result.data;
    						mui.each(result.data,function(i){
    							//设置参数
    							add_bank_list(result.data[i]);
    						});
    					}
    		},function(result){
    			if(result.code==3){
    				mui.toast("用户信息不存在！");
    				return;
    			}else if(result.code==2){
    				mui.toast("获取失败");
    				return;
    			}
    		},paramUrl);
    		// 监听确定事件
	    	mui('body').on('tap', '.mui-popover-action li>a', function() {
				var a = this,
					parent;
				//根据点击按钮，反推当前是哪个actionsheet
				for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
					if (parent.classList.contains('mui-popover-action')) {
						break;
					}
				}
				// 确认
				var aid = a.id;
				var texts=document.getElementById("confirm_quit").innerText;
				if ('confirm_quit'==aid){
					if(!mui.isnull(a_id)&&"确认删除"==texts){
						deletebank(a_id);
					}else if("确认添加"==texts){
//						add_bank();  
					}
					
				}
				//关闭actionsheet
				mui('#' + parent.id).popover('toggle');   
			});
			document.getElementById("confirmBtns").addEventListener("tap",function(){
				sendCardMessage(bank_list,card,city,detailCity,detailedAddress);
			});
			document.getElementById("cancelBtn").addEventListener("tap",function(){
				$("#alertDiv").css("display","none");
			})
		});
		
		
		function changebank(li){
			var paramUrl={
				url:"../login/login.html"
			}
			var ul=li.parentNode;
			var spans=ul.getElementsByClassName("mui-icon mui-icon-checkmarkempty");
			if(spans.length>0){
				spans[0].remove();
			}
			var objs=li.childNodes;
			var id=null;
			for(var i=0;i<objs.length;i++){
				if(i==0){
					id=objs[i].getAttribute("id");
				}
			 	if(i==objs.length-1){
			 		var className=objs[i].getAttribute("class");
			 		if(className=="mui-icon mui-icon-checkmarkempty"){
			 			return;
			 		}
			 	}
			}
			var span=document.createElement("span");
			span.setAttribute("class","mui-icon mui-icon-checkmarkempty");
			li.appendChild(span);
			mui.app_request("user/withdraw/set_default_bank",{
				"bankId":id
			},function(result){
				mui.toast("设置成功");
				mui.app_refresh("withdraw");
				return;
			},function(result){
				if(result.code==2){
					mui.toast("设置失败");
					return;
				}else if(result.code==3){
					mui.toast("银行卡不存在");
					return;
				}
			},paramUrl)
		};
		
		
		
		function deletebank(id){
			var paramUrl={
				url:"../login/login.html"
			}
			mui.app_request("/user/withdraw/del_bank",{
				"bankId":id
			},function(result){
				mui.toast("删除成功！");
				location.reload(true);
				return;
			},function(result){
				mui.toast(result.message);
				return;
			},paramUrl)
		};
		var bankNameName;
		var bank_list;
		var card;
		var city;
		var detailCity;
		var detailedAddress;
		function add_bank(){
			var username=document.getElementById("user_name").value;
			bank_list=document.getElementById("bank_list").value;
			card=document.getElementById("card").value;
			var showCityPicker=document.getElementById("showCityPicker").value;
			detailedAddress=document.getElementById("detailedAddress").value;
			if(mui.isnull(username)){
				mui.toast("请先实名认证！");
				mui.openWindow("verified.html");
				return;
			} 
			if(bank_list==-1){
				mui.toast("请选择开户银行！");
				return;
			}
			if(showCityPicker=="请选择省市"){
				mui.toast("请选择省市！");
				return;
			}
			if(detailedAddress=="" || detailedAddress==null || detailedAddress==undefined){
				mui.toast("请输入详细地址！");
				return;
			}
			if(mui.isnull(card)||!card.match(/^[0-9]*$/)){
				mui.toast("银行卡号不能为空且不能输入非法字符！");
				return;
			}
			
			mui.each(bankList,function(i){
				if(bankList[i].abbreviation==bank_list){
					bankNameName=bankList[i].bankName;
				}
			});
			//弹出确认框
			var content="开户姓名："+username+"  开户银行："+bankNameName+"  开户地址："+showCityPicker+detailedAddress+"  银行卡号："+card;
			setTimeout(function(){
				$("#alertDiv").css("display","block");
				$("#alertMainContent").html("<p>开户姓名："+username+"</p><p>开户银行："+bankNameName+"</p><p>开户地址："+showCityPicker+detailedAddress+"</p><p>银行卡号："+card+"</p>")
				
			},500);
			var cityList=showCityPicker.split(" ");
			city=cityList[0];
			detailCity=cityList[1]
		};
		/*//添加银行卡
		$("#confirmBtn").click(function(){
			alert(bank_list);
			
		});*/
		
		
		function sendCardMessage(bank_list,card,city,detailCity){
			var paramUrl={
				url:"../login/login.html"
			}
			mui.app_request("/user/withdraw/add_bank",{
				"bank":bank_list,
				"prov":city,
				"city":detailCity,
				"address":detailedAddress,
				"card":card
			},function(result){
				mui.toast("添加成功！");
				location.reload(true);
				mui.app_refresh("withdraw");
				return;
			},function(result){
				if(result.code==2){
					mui.toast("添加失败！");
					return;
				}else if(result.code==3){
					mui.toast("用户信息不存在！");
					return;
				}else if(result.code==4){
					mui.toast("银行卡卡号已经存在！");
					return;
				}else if(result.code==5){
					mui.toast("请先实名认证方可添加银行卡！");
					mui.openWindow("verified.html");
					return;
				}else{
					mui.toast("系统繁忙，请稍后再试！");
					return;
				}
			},paramUrl);
		}
		/**/
		function add_bank_list(bank){
			var bank_list=document.getElementById("bank_list");
			var bank_num=document.createElement("option");
			bank_num.setAttribute("value",bank.abbreviation);
			bank_num.innerText=bank.bankName;
			bank_list.appendChild(bank_num);
		}
		
		
		
		function addBankList(bank){
				var ac_bank=document.getElementById("aw_bank");  
				var bank_num=document.createElement("li");
    			bank_num.setAttribute('class','mui-table-view-cell');
    			
    			var img=document.createElement("img");
    			
    			img.setAttribute("src","../../images/bank/"+bank.abbreviation+".png");
    			var h3=document.createElement("h3");
    			h3.innerText=bank.bankName;
    			var p=document.createElement("p");
    			p.innerText=bank.card;
    			var a=document.createElement("a");
    			a.setAttribute("class","ui-icon-trash");
    			a.setAttribute("id",bank.bankId);
    			var a_span=document.createElement("span");
    			a_span.setAttribute("class","mui-icon mui-icon-trash");
				//设置默认被选中样式
    			if(bank.default){  
    				a_id=bank.bankId;
				   var span=document.createElement("span");
    				span.setAttribute("class","mui-icon mui-icon-checkmarkempty");
    				bank_num.appendChild(span);
				}
    			var div=document.createElement("div");
    			div.setAttribute("class","awc_bank");
    			a.appendChild(a_span);
    			bank_num.appendChild(a);
    			div.appendChild(h3);
    			div.appendChild(p);
    			div.appendChild(img);
    			bank_num.appendChild(div);
    			ac_bank.appendChild(bank_num);
    			
    			
		}
	</script>

</head>

<body>
	<header class="mui-bar mui-bar-nav own-topbg">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" id="back"><i>返回</i></a>
		<h1 id="nav-title" class="mui-title">绑定银行卡</h1>
		<a href="javascript:void(0)" class="top-tel" id="online">在线客服</a>
	</header>

<body>	

	<!--<nav class="navlist">
		<a href="javascript:void(0);" id="product">
			<span class="mui-icon mui-icon-list"></span>
			<span class="mui-tab-label">产品</span>
		</a>
		<a class="" href="javascript:void(0);"  id="scheme">
			<span class="mui-icon mui-icon-compose"></span>
			<span class="mui-tab-label">方案</span>
		</a>
		<a  class="navon"  id="account" href="javascript:void(0);">
			<span class="mui-icon mui-icon-contact mui-icon-icon-contact-filled"></span>
			<span class="mui-tab-label" >账户</span>
		</a>
	</nav>-->
	<div class="mui-content ac_tel">
		<ul class="mui-table-view aw_bank" id="aw_bank">
			<li class="mui-table-view-cell">
				
			</li>
		</ul>
		<ul class="mui-table-view aw_bc_bank">
			<li class="mui-table-view-cell">
				<label>开户姓名</label>
				<input id="user_name" type="text" disabled="disabled" class="mui-input-clear" placeholder="" data-input-clear="5">
			</li>			
			<li class="mui-table-view-cell">
				<label>开户银行</label>							
				<select class="mui-btn mui-btn-block" id="bank_list">
					<option value="-1">请选择银行类型</option>

				</select>
			</li>
			<li class="mui-table-view-cell">
				<label>开户地址</label>
				<input id='showCityPicker'  type='button' class="mui-input-clear" value="请选择省市">
				<!--<label></label>
				<input type="text" placeholder="请输入详细地址" id="detailedAddress"/>-->
			</li>
			<li class="mui-table-view-cell">
				<label>详细地址</label>
				<input id="detailedAddress" type="text" class="mui-input-clear" placeholder="输入详细地址" >
			</li>
			<li class="mui-table-view-cell">
				<label>银行卡号</label>
				<input id="card" type="tel" class="mui-input-clear" placeholder="输入银行卡号" data-input-clear="5" maxlength="19">
			</li>
		</ul>
		<div class="ac_btn">
			<button class="mui-btn mui-btn-block lg-btnlogin" type="button" id="add_bank">添加银行卡</button>								
		</div>		 
		
		<div id="quitaccc" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#" style="color: red;" id="confirm_quit">确认退出</a>
				</li>
				
			</ul>  
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#">取消</a>
				</li>
			</ul>
		</div>
		<div id="alertDiv">
			<div id="alertDivContent">
				<h3>确认银行卡</h3>
				<div id="alertMainContent">
					<p><span>234</span><span>23</span></p>
					<p><span>234</span><span>23</span></p>
					<p><span>234</span><span>23</span></p>
					<p><span>234</span><span>23</span></p>
				</div>
				<button class="mui-btn" id="confirmBtns">确认</button ><button class="mui-btn" id="cancelBtn">取消</button>
			</div>
		</div>
	</div>
	<script src="../../js/mui.picker.min.js"></script>
	<script src="../../js/mui.poppicker.js"></script>
	<script src="../../js/city.data.js"></script>
	<script>
		(function($, doc) {
				$.init();
				$.ready(function() {
					//级联示例
					var cityPicker = new $.PopPicker({
						layer: 2
					});
					cityPicker.setData(cityData);
					var showCityPickerButton = doc.getElementById('showCityPicker');
//					var cityResult = doc.getElementById('cityResult');
					showCityPickerButton.addEventListener('tap', function(event) {
						cityPicker.show(function(items) {
							showCityPickerButton.value = items[0].text + " " + items[1].text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					});
			})(mui, document);
	</script>
	<script>
	tzdr.online();
</script>
</body>
</html>